<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .layui-layout-body {
            overflow-y: auto;
        }
    </style>
</head>
<body>


<div id="demo1" class="xm-select-demo"></div>

<button id="getData" style="display: none"></button>

</body>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/xm-select.js}"></script>
<script>
    var selectTree;
    layui.use(['form','jquery'], function() {
        var $ = layui.jquery;
        selectTree = xmSelect.render({
            el: '#demo1',
           /* height: '500px',*/
            autoRow: true,
            filterable: true,
            model: {
                type: 'relative', //默认 absolute
            },
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                expandedKeys: true,
            },
            toolbar: {
                show: true,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            data(){
                let permissionList;
                var a = `[[${id}]]`+""
                $.ajax({
                    type : "post",
                    url : "/getPermissionListByRid",
                    data : {rid:a},
                    async : false,
                    success : function(data){
                        permissionList = data.data;
                    }
                });

                return permissionList
            }
        })
        $("#getData").click(function () {
            let value2 = selectTree.getTreeValue(false,true);
            let array = new Array();
            for (let i = 0; i < value2.length; i++) {
                array.push(value2[i].id);
            }
            $(this).val(array)
            //console.log(value)
        })
    })


</script>
</html>